<template>
  <div class="goods-management">
    <!-- 顶部搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="searchQuery"
        placeholder="按商品编号/名称/条码/规格型号/供应商/品牌查询"
        clearable
        class="search-input"
      />
      
      <el-select
        v-model="enabledStatus"
        placeholder="显示启用商品"
        clearable
        class="status-select"
      >
        <el-option label="全部" value="all" />
        <el-option label="启用" value="enabled" />
        <el-option label="禁用" value="disabled" />
      </el-select>
      
      <!-- 修改为勾选框 -->
      <el-checkbox v-model="showNoStock">显示零库存商品</el-checkbox>
      &nbsp;&nbsp;&nbsp;
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button @click="handleRefresh">刷新</el-button>
    </div>
    
    <!-- 操作按钮区 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button @click="handlePrintLabels">打印商品标签</el-button>
      <el-button @click="handleBatchSettings">批量设置</el-button>
      <el-button @click="handleDisable" :disabled="!selectedGoods.length">禁用</el-button>
      <el-button @click="handleEnable" :disabled="!selectedGoods.length">启用</el-button>
      <el-button @click="handleImport">导入</el-button>
      <el-button @click="handleExport">导出</el-button>
      <el-button type="danger" @click="handleDelete" :disabled="!selectedGoods.length">删除</el-button>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 左侧商品表格 -->
      <div class="goods-table-wrapper">
        <div class="table-header">
          <div class="current-category">
            <span>当前分类：</span>
            <el-input
              v-model="categorySearch"
              placeholder="搜索..."
              clearable
              class="category-search"
            />
          </div>
          <el-button type="text" @click="handleColumnSettings">列设置</el-button>
        </div>
        
        <el-table
          :data="filteredGoods"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="index" label="序号" width="60" align="center" />
          <el-table-column label="操作" width="80" align="center">
            <template #default="scope">
              <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column label="图片" width="100" align="center">
            <template #default="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.image"
                :preview-src-list="[scope.row.image]"
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column prop="code" label="商品编号" width="120" />
          <el-table-column prop="name" label="商品名称" width="150" />
          <el-table-column prop="barcode" label="商品条码" width="120" />
          <el-table-column prop="label" label="商品标签" width="100" />
          <el-table-column prop="auxAttr" label="辅助属性" width="100" />
          <el-table-column prop="category" label="商品类别" width="100" />
          <el-table-column prop="spec" label="规格型号" width="120" />
          <el-table-column prop="supplier" label="默认供应商" width="120" />
          <el-table-column prop="brand" label="品牌" width="100" />
          <el-table-column prop="retailPrice" label="零售价" width="100" align="right">
            <template #default="scope">
              ¥{{ scope.row.retailPrice.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="wholesalePrice" label="批发价" width="100" align="right">
            <template #default="scope">
              ¥{{ scope.row.wholesalePrice.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="库存" width="80" align="center" />
          <el-table-column prop="unit" label="单位" width="80" align="center" />
        </el-table>
        
        <div class="pagination">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      
      <!-- 右侧分类树 -->
      <div class="category-tree-wrapper">
        <el-input
          v-model="treeSearch"
          placeholder="搜索"
          clearable
          class="tree-search"
        />
        
        <el-tree
          :data="categoryTree"
          :props="treeProps"
          node-key="id"
          default-expand-all
          highlight-current
          :filter-node-method="filterNode"
          @node-click="handleCategoryClick"
          class="category-tree"
        >
          <template #default="{ node }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, watch } from 'vue'

export default {
  name: 'GoodsManagement',
  
  setup() {
    // 搜索条件
    const searchQuery = ref('')
    const enabledStatus = ref('enabled')
    const showNoStock = ref(true) // 修改为勾选框
    const categorySearch = ref('')
    const treeSearch = ref('')
    
    // 分页
    const currentPage = ref(1)
    const pageSize = ref(20)
    const totalItems = ref(140)
    
    // 选中的商品
    const selectedGoods = ref([])
    
    // 商品数据 (根据图片中的示例数据)
    const goodsData = reactive([
      {
        id: 1,
        index: 1,
        code: 'SP0215',
        name: '批次保质期商品',
        barcode: '6902538004045',
        label: '批',
        auxAttr: '',
        category: '饮料',
        spec: '600mL',
        supplier: '销售工作台测试商品',
        brand: '脉动',
        image: 'https://example.com/goods1.jpg',
        status: 'enabled',
        stock: 10,
        retailPrice: 5.50,
        wholesalePrice: 4.80,
        unit: '瓶'
      },
      {
        id: 2,
        index: 2,
        code: 'SP0214',
        name: '拆卸商品B',
        barcode: '',
        label: '',
        auxAttr: '',
        category: '茶',
        spec: '',
        supplier: '',
        brand: '',
        image: 'https://example.com/goods2.jpg',
        status: 'enabled',
        stock: 15,
        retailPrice: 12.00,
        wholesalePrice: 10.50,
        unit: '个'
      },
    ])
    
    // 分类树数据 (根据图片中的分类结构)
    const categoryTree = reactive([
      {
        id: 0,
        label: '全部',
        children: [
          {
            id: 1,
            label: '茶',
            children: [
              { id: 11, label: '绿茶' }
            ]
          },
          {
            id: 2,
            label: '酒类',
            children: [
              { 
                id: 21, 
                label: '红酒',
                children: [
                  { id: 211, label: '国产' },
                  { id: 212, label: '进口' }
                ]
              },
              { id: 22, label: '啤酒' },
              { id: 23, label: '葡萄酒' },
              { id: 24, label: '其它' }
            ]
          },
          {
            id: 3,
            label: '食品',
            children: [
              { id: 31, label: '调味品' },
              { id: 32, label: '进口食品' },
              { id: 33, label: '零食' }
            ]
          },
          {
            id: 4,
            label: '饮料',
            children: [
              { id: 41, label: '果汁' },
              { id: 42, label: '矿泉水' }
            ]
          }
        ]
      }
    ])
    
    const treeProps = {
      children: 'children',
      label: 'label'
    }
    
    // 分类树搜索过滤
    const filterNode = (value, data) => {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
    
    watch(treeSearch, (val) => {
      console.log('分类树搜索:', val)
    })
    
    // 商品数据过滤
    const filteredGoods = computed(() => {
      return goodsData.filter(item => {
        // 搜索条件过滤
        const matchesSearch = searchQuery.value === '' || 
          item.code.includes(searchQuery.value) || 
          item.name.includes(searchQuery.value) || 
          item.barcode.includes(searchQuery.value) ||
          item.spec.includes(searchQuery.value) ||
          item.supplier.includes(searchQuery.value) ||
          item.brand.includes(searchQuery.value)
        
        // 启用状态过滤
        const matchesStatus = enabledStatus.value === '' || 
          enabledStatus.value === 'all' ||
          (enabledStatus.value === 'enabled' && item.status === 'enabled') ||
          (enabledStatus.value === 'disabled' && item.status === 'disabled')
        
        // 库存状态过滤 (修改为勾选框逻辑)
        const matchesStock = showNoStock.value || item.stock > 0
        
        // 分类过滤
        const matchesCategory = categorySearch.value === '' || 
          item.category.includes(categorySearch.value)
        
        return matchesSearch && matchesStatus && matchesStock && matchesCategory
      })
    })
    
    // 各种操作处理函数
    const handleSearch = () => {
      currentPage.value = 1
      console.log('执行搜索:', searchQuery.value)
    }
    
    const handleRefresh = () => {
      searchQuery.value = ''
      enabledStatus.value = 'enabled'
      showNoStock.value = true
      categorySearch.value = ''
      handleSearch()
    }
    
    const handleAdd = () => {
      console.log('新增商品')
    }
    
    const handlePrintLabels = () => {
      console.log('打印商品标签')
    }
    
    const handleBatchSettings = () => {
      console.log('批量设置')
    }
    
    const handleDisable = () => {
      console.log('禁用选中商品:', selectedGoods.value)
    }
    
    const handleEnable = () => {
      console.log('启用选中商品:', selectedGoods.value)
    }
    
    const handleImport = () => {
      console.log('导入商品')
    }
    
    const handleExport = () => {
      console.log('导出商品')
    }
    
    const handleDelete = () => {
      console.log('删除选中商品:', selectedGoods.value)
    }
    
    const handleColumnSettings = () => {
      console.log('列设置')
    }
    
    const handleSelectionChange = (selection) => {
      selectedGoods.value = selection
    }
    
    const handleSizeChange = (val) => {
      pageSize.value = val
      handleSearch()
    }
    
    const handleCurrentChange = (val) => {
      currentPage.value = val
    }
    
    const handleCategoryClick = (data) => {
      console.log('选中分类:', data)
      categorySearch.value = data.label
      handleSearch()
    }
    
    const handleEdit = (row) => {
      console.log('编辑商品:', row)
    }
    
    return {
      searchQuery,
      enabledStatus,
      showNoStock,
      categorySearch,
      treeSearch,
      currentPage,
      pageSize,
      totalItems,
      selectedGoods,
      goodsData,
      filteredGoods,
      categoryTree,
      treeProps,
      filterNode,
      handleSearch,
      handleRefresh,
      handleAdd,
      handlePrintLabels,
      handleBatchSettings,
      handleDisable,
      handleEnable,
      handleImport,
      handleExport,
      handleDelete,
      handleColumnSettings,
      handleSelectionChange,
      handleSizeChange,
      handleCurrentChange,
      handleCategoryClick,
      handleEdit
    }
  }
}
</script>

<style scoped>
.goods-management {
  padding: 20px;
  background-color: #f5f7fa;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.search-input {
  width: 300px;
  margin-right: 15px;
}

.status-select {
  width: 150px;
  margin-right: 15px;
}

.action-buttons {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.action-buttons > * {
  margin-right: 10px;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.goods-table-wrapper {
  flex: 1;
  margin-right: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.category-tree-wrapper {
  width: 250px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.current-category {
  display: flex;
  align-items: center;
}

.category-search {
  width: 150px;
  margin-left: 10px;
}

.tree-search {
  margin-bottom: 15px;
}

.category-tree {
  flex: 1;
  overflow-y: auto;
}

.goods-table {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 15px;
}

.pagination {
  margin-top: 15px;
  text-align: right;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>